import 'package:flutter/material.dart';
import 'package:flutter_yue_joy/pages/home/index.dart';
import 'package:flutter_yue_joy/pages/mine/index.dart';

class TabsPage extends StatefulWidget {
  const TabsPage({Key? key}) : super(key: key);

  @override
  _TabsPageState createState() => _TabsPageState();
}

class _TabsPageState extends State<TabsPage> {
  List tabsList = [
    {'label': '首页', 'icon': Icons.home_outlined, 'activeIcon': Icons.home},
    {'label': '我的', 'icon': Icons.person_outline, 'activeIcon': Icons.person}
  ];

  int activeIndex = 0;

  //循环遍历创建tabs底部
  List<BottomNavigationBarItem> getTabsBar() {
    List<BottomNavigationBarItem> list = [];
    for (var i = 0; i < tabsList.length; i++) {
      var item = tabsList[i];
      list.add(BottomNavigationBarItem(
        icon: Icon(item['icon']),
        activeIcon: Icon(item['activeIcon']),
        label: item['label'],
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // appBar: AppBar(
        //   title: Text('Tabs'),
        // ),
        body: SafeArea(
          child: IndexedStack(
            index: activeIndex,
            children: [
              HomePage(),
              MinePage(),
            ],
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
            //数组循环
            items: getTabsBar(),
            // 当前索引
            currentIndex: activeIndex,
            // 底部导航栏类型
            type: BottomNavigationBarType.fixed,
            // 选中颜色
            selectedItemColor: Colors.red,
            // 未选中颜色
            unselectedItemColor: Colors.black,
            // 点击事件
            onTap: (index) {
              setState(() {
                activeIndex = index;
              });
            }));
  }
}
